<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
    <!-- 

        1：html 布局
     -->
    <div id="app">
        <H2>{{msg}}</H2>
        <h2>{{num}}</h2>
        <button @click="add">点击+</button>
    </div>
</body>
<!-- <script>
   let app = document.getElementById('app')
   app.innerHTML = '你好同学'

</script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    console.log(Vue);//vue

    //使用vue
     
  let app =   new Vue({ //vue 属性
          el:'#app', //选择中的元素=》包括自己和里面的元素可以使用 vue 语法
          data:{ //存放数据
            msg:'你好同学',
            num:1
          },
          methods:{
            add(){
                this.num++  
            }
          }
     })


     //vue指令

     // {{}}
</script>
</html>